@defikitdotnet/education-module-ai/lib/pages/teacher/course/[id]/content/create.js

AI Education Module using Agent Framework

"use strict";
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
    return new (P || (P = Promise))(function (resolve, reject) {
        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
        step((generator = generator.apply(thisArg, _arguments || [])).next());
    });
};
var __generator = (this && this.__generator) || function (thisArg, body) {
    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
    function verb(n) { return function (v) { return step([n, v]); }; }
    function step(op) {
        if (f) throw new TypeError("Generator is already executing.");
        while (g && (g = 0, op[0] && (_ = 0)), _) try {
            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
            if (y = 0, t) op = [op[0] & 2, t.value];
            switch (op[0]) {
                case 0: case 1: t = op; break;
                case 4: _.label++; return { value: op[1], done: false };
                case 5: _.label++; y = op[1]; op = [0]; continue;
                case 7: op = _.ops.pop(); _.trys.pop(); continue;
                default:
                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
                    if (t[2]) _.ops.pop();
                    _.trys.pop(); continue;
            }
            op = body.call(thisArg, _);
        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
    }
};
Object.defineProperty(exports, "__esModule", { value: true });
var jsx_runtime_1 = require("react/jsx-runtime");
var react_1 = require("react");
var router_1 = require("next/router");
var button_1 = require("../../../../../components/ui/button");
var label_1 = require("../../../../../components/ui/label");
var card_1 = require("../../../../../components/ui/card");
var alert_1 = require("../../../../../components/ui/alert");
var lucide_react_1 = require("lucide-react");
var useCourseContent_1 = require("../../../../../hooks/useCourseContent");
var ContentCreate = function () {
    var router = (0, router_1.useRouter)();
    var courseId = router.query.id;
    var _a = (0, react_1.useState)(""), agentId = _a[0], setAgentId = _a[1];
    var _b = (0, react_1.useState)(""), title = _b[0], setTitle = _b[1];
    var _c = (0, react_1.useState)(""), description = _c[0], setDescription = _c[1];
    var _d = (0, react_1.useState)("text"), contentType = _d[0], setContentType = _d[1];
    var _e = (0, react_1.useState)(""), textContent = _e[0], setTextContent = _e[1];
    var _f = (0, react_1.useState)(""), videoUrl = _f[0], setVideoUrl = _f[1];
    var _g = (0, react_1.useState)(""), h5pContent = _g[0], setH5pContent = _g[1];
    var _h = (0, react_1.useState)(false), isSuccess = _h[0], setIsSuccess = _h[1];
    var _j = (0, react_1.useState)(null), submitError = _j[0], setSubmitError = _j[1];
    var _k = (0, react_1.useState)({}), validationErrors = _k[0], setValidationErrors = _k[1];
    // Use our custom hook
    var _l = (0, useCourseContent_1.useCourseContent)(agentId), isLoading = _l.isLoading, error = _l.error, createContent = _l.createContent;
    (0, react_1.useEffect)(function () {
        // Get agent ID from localStorage
        var storedAgentId = localStorage.getItem("agentId");
        if (storedAgentId) {
            setAgentId(storedAgentId);
        }
        // Update URL if courseId is available
        if (courseId && typeof courseId === "string") {
            router.replace("/teacher/course/".concat(courseId, "/content/create"), undefined, {
                shallow: true,
            });
        }
    }, [courseId, router]);
    var validateForm = function () {
        var errors = {};
        if (!title.trim()) {
            errors.title = "Title is required";
        }
        else if (title.length > 100) {
            errors.title = "Title must be less than 100 characters";
        }
        if (description.length > 500) {
            errors.description = "Description must be less than 500 characters";
        }
        if (contentType === "text" && !textContent.trim()) {
            errors.content = "Content is required for text type";
        }
        if (contentType === "video" && !videoUrl.trim()) {
            errors.content = "Video URL is required";
        }
        else if (contentType === "video" &&
            !/^(https?:\/\/)?(www\.)?(youtube\.com|youtu\.be)\/.*$/.test(videoUrl)) {
            errors.content = "Please enter a valid YouTube URL";
        }
        if (contentType === "h5p" && !h5pContent.trim()) {
            errors.content = "H5P content is required";
        }
        setValidationErrors(errors);
        return Object.keys(errors).length === 0;
    };
    var handleSubmit = function (e) { return __awaiter(void 0, void 0, void 0, function () {
        var content, err_1;
        return __generator(this, function (_a) {
            switch (_a.label) {
                case 0:
                    e.preventDefault();
                    setSubmitError(null);
                    setIsSuccess(false);
                    if (!validateForm()) {
                        return [2 /*return*/];
                    }
                    switch (contentType) {
                        case "text":
                            content = { text: textContent };
                            break;
                        case "video":
                            content = { url: videoUrl };
                            break;
                        case "h5p":
                            content = { h5p: h5pContent };
                            break;
                    }
                    _a.label = 1;
                case 1:
                    _a.trys.push([1, 4, , 5]);
                    if (!(courseId && typeof courseId === "string")) return [3 /*break*/, 3];
                    return [4 /*yield*/, createContent(courseId, {
                            title: title,
                            description: description,
                            type: contentType,
                            content: content,
                            order: 0, // Backend will handle the proper ordering
                            createdAt: new Date().toISOString(),
                            updatedAt: new Date().toISOString(),
                        })];
                case 2:
                    _a.sent();
                    setIsSuccess(true);
                    // Reset form
                    setTitle("");
                    setDescription("");
                    setContentType("text");
                    setTextContent("");
                    setVideoUrl("");
                    setH5pContent("");
                    // Navigate to content list after a short delay
                    setTimeout(function () {
                        router.push("/teacher/course/".concat(courseId, "/content"));
                    }, 2000);
                    _a.label = 3;
                case 3: return [3 /*break*/, 5];
                case 4:
                    err_1 = _a.sent();
                    if (err_1 instanceof Error) {
                        setSubmitError(err_1.message);
                    }
                    else {
                        setSubmitError("An unknown error occurred");
                    }
                    return [3 /*break*/, 5];
                case 5: return [2 /*return*/];
            }
        });
    }); };
    return ((0, jsx_runtime_1.jsx)("div", { className: "container mx-auto py-8", children: (0, jsx_runtime_1.jsxs)(card_1.Card, { className: "max-w-3xl mx-auto", children: [(0, jsx_runtime_1.jsxs)(card_1.CardHeader, { children: [(0, jsx_runtime_1.jsx)(card_1.CardTitle, { className: "text-2xl", children: "Create New Content" }), (0, jsx_runtime_1.jsx)(card_1.CardDescription, { children: "Add new content to your course" })] }), (0, jsx_runtime_1.jsxs)(card_1.CardContent, { children: [error && ((0, jsx_runtime_1.jsxs)(alert_1.Alert, { variant: "destructive", className: "mb-6", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.AlertCircle, { className: "h-4 w-4" }), (0, jsx_runtime_1.jsx)(alert_1.AlertTitle, { children: "Error" }), (0, jsx_runtime_1.jsx)(alert_1.AlertDescription, { children: error })] })), submitError && ((0, jsx_runtime_1.jsxs)(alert_1.Alert, { variant: "destructive", className: "mb-6", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.AlertCircle, { className: "h-4 w-4" }), (0, jsx_runtime_1.jsx)(alert_1.AlertTitle, { children: "Error" }), (0, jsx_runtime_1.jsx)(alert_1.AlertDescription, { children: submitError })] })), isSuccess && ((0, jsx_runtime_1.jsxs)(alert_1.Alert, { className: "mb-6 bg-green-50 text-green-800 border-green-200", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.CheckCircle2, { className: "h-4 w-4" }), (0, jsx_runtime_1.jsx)(alert_1.AlertTitle, { children: "Success" }), (0, jsx_runtime_1.jsx)(alert_1.AlertDescription, { children: "Content created successfully! Redirecting..." })] })), (0, jsx_runtime_1.jsxs)("form", { onSubmit: handleSubmit, children: [(0, jsx_runtime_1.jsxs)("div", { className: "mb-6", children: [(0, jsx_runtime_1.jsxs)(label_1.Label, { htmlFor: "title", className: "block mb-2", children: ["Title ", (0, jsx_runtime_1.jsx)("span", { className: "text-red-500", children: "*" })] }), (0, jsx_runtime_1.jsx)("input", { id: "title", type: "text", value: title, onChange: function (e) { return setTitle(e.target.value); }, className: "w-full px-3 py-2 border ".concat(validationErrors.title ? "border-red-500" : "border-gray-300", " rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-primary-500"), placeholder: "Enter content title", disabled: isLoading, "data-testid": "content-title-input", autoComplete: "off" }), validationErrors.title && ((0, jsx_runtime_1.jsx)("p", { className: "text-red-500 text-sm mt-1", children: validationErrors.title }))] }), (0, jsx_runtime_1.jsxs)("div", { className: "mb-6", children: [(0, jsx_runtime_1.jsx)(label_1.Label, { htmlFor: "description", className: "block mb-2", children: "Description" }), (0, jsx_runtime_1.jsx)("textarea", { id: "description", value: description, onChange: function (e) { return setDescription(e.target.value); }, className: "w-full px-3 py-2 border ".concat(validationErrors.description ? "border-red-500" : "border-gray-300", " rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-primary-500"), placeholder: "Enter content description", disabled: isLoading, "data-testid": "content-description-textarea", rows: 4 }), validationErrors.description && ((0, jsx_runtime_1.jsx)("p", { className: "text-red-500 text-sm mt-1", children: validationErrors.description }))] }), (0, jsx_runtime_1.jsxs)("div", { className: "mb-6", children: [(0, jsx_runtime_1.jsxs)("label", { className: "block mb-2", children: ["Content Type ", (0, jsx_runtime_1.jsx)("span", { className: "text-red-500", children: "*" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex gap-6", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center space-x-2", children: [(0, jsx_runtime_1.jsx)("input", { type: "radio", id: "content-type-text", name: "contentType", value: "text", checked: contentType === "text", onChange: function () { return setContentType("text"); }, className: "w-4 h-4 text-primary-600 focus:ring-primary-500" }), (0, jsx_runtime_1.jsx)("label", { htmlFor: "content-type-text", className: "text-sm font-medium cursor-pointer", children: "Text" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center space-x-2", children: [(0, jsx_runtime_1.jsx)("input", { type: "radio", id: "content-type-video", name: "contentType", value: "video", checked: contentType === "video", onChange: function () { return setContentType("video"); }, className: "w-4 h-4 text-primary-600 focus:ring-primary-500" }), (0, jsx_runtime_1.jsx)("label", { htmlFor: "content-type-video", className: "text-sm font-medium cursor-pointer", children: "Video" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center space-x-2", children: [(0, jsx_runtime_1.jsx)("input", { type: "radio", id: "content-type-h5p", name: "contentType", value: "h5p", checked: contentType === "h5p", onChange: function () { return setContentType("h5p"); }, className: "w-4 h-4 text-primary-600 focus:ring-primary-500" }), (0, jsx_runtime_1.jsx)("label", { htmlFor: "content-type-h5p", className: "text-sm font-medium cursor-pointer", children: "H5P" })] })] })] }), contentType === "text" && ((0, jsx_runtime_1.jsxs)("div", { className: "mb-6", children: [(0, jsx_runtime_1.jsxs)(label_1.Label, { htmlFor: "text-content", className: "block mb-2", children: ["Text Content ", (0, jsx_runtime_1.jsx)("span", { className: "text-red-500", children: "*" })] }), (0, jsx_runtime_1.jsx)("textarea", { id: "text-content", value: textContent, onChange: function (e) { return setTextContent(e.target.value); }, className: "w-full px-3 py-2 border ".concat(validationErrors.content ? "border-red-500" : "border-gray-300", " rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-primary-500"), placeholder: "Enter your content here", rows: 8, disabled: isLoading, "data-testid": "text-content-textarea" }), validationErrors.content && contentType === "text" && ((0, jsx_runtime_1.jsx)("p", { className: "text-red-500 text-sm mt-1", children: validationErrors.content }))] })), contentType === "video" && ((0, jsx_runtime_1.jsxs)("div", { className: "mb-6", children: [(0, jsx_runtime_1.jsxs)(label_1.Label, { htmlFor: "video-url", className: "block mb-2", children: ["YouTube URL ", (0, jsx_runtime_1.jsx)("span", { className: "text-red-500", children: "*" })] }), (0, jsx_runtime_1.jsx)("input", { type: "url", id: "video-url", value: videoUrl, onChange: function (e) { return setVideoUrl(e.target.value); }, className: "w-full px-3 py-2 border ".concat(validationErrors.content ? "border-red-500" : "border-gray-300", " rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-primary-500"), placeholder: "https://www.youtube.com/watch?v=...", disabled: isLoading, "data-testid": "video-url-input", autoComplete: "off" }), validationErrors.content && contentType === "video" && ((0, jsx_runtime_1.jsx)("p", { className: "text-red-500 text-sm mt-1", children: validationErrors.content }))] })), contentType === "h5p" && ((0, jsx_runtime_1.jsxs)("div", { className: "mb-6", children: [(0, jsx_runtime_1.jsxs)(label_1.Label, { htmlFor: "h5p-content", className: "block mb-2", children: ["H5P Content ID or URL ", (0, jsx_runtime_1.jsx)("span", { className: "text-red-500", children: "*" })] }), (0, jsx_runtime_1.jsx)("input", { type: "text", id: "h5p-content", value: h5pContent, onChange: function (e) { return setH5pContent(e.target.value); }, className: "w-full px-3 py-2 border ".concat(validationErrors.content ? "border-red-500" : "border-gray-300", " rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-primary-500"), placeholder: "Enter H5P content ID or embed URL", disabled: isLoading, "data-testid": "h5p-content-input", autoComplete: "off" }), validationErrors.content && contentType === "h5p" && ((0, jsx_runtime_1.jsx)("p", { className: "text-red-500 text-sm mt-1", children: validationErrors.content })), (0, jsx_runtime_1.jsx)("p", { className: "text-sm text-gray-500 mt-1", children: "You can create interactive H5P content and paste its ID or embed URL here." })] })), (0, jsx_runtime_1.jsxs)("div", { className: "flex justify-end space-x-4", children: [(0, jsx_runtime_1.jsx)("a", { href: "#", className: "inline-flex items-center justify-center rounded-md font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 border border-gray-300 bg-white text-gray-700 hover:bg-gray-50 h-10 px-4 py-2", onClick: function (e) {
                                                e.preventDefault();
                                                console.log("Cancel button clicked");
                                                // Use a small timeout to prevent throttling
                                                setTimeout(function () {
                                                    if (courseId && typeof courseId === "string") {
                                                        router.push("/teacher/course/".concat(courseId, "?agentId=").concat(agentId));
                                                    }
                                                    else {
                                                        router.push("/teacher?agentId=".concat(agentId));
                                                    }
                                                }, 50);
                                            }, children: "Cancel" }), (0, jsx_runtime_1.jsx)(button_1.Button, { type: "submit", disabled: isLoading, children: isLoading ? "Creating..." : "Create Content" })] })] })] })] }) }));
};
exports.default = ContentCreate;